<template>
  <div class="child-app-wrapper">
    <v-drag @onclk="handleClk" wrapClass="child-app-drag">
      <div class="wrapper">系统</div>
    </v-drag>
    <router-view></router-view>
    <a-drawer
      placement="top"
      :closable="true"
      :visible="visible"
      @close="onClose"
    >
      <div class="child-app-wrap">
        <div
          class="app-item"
          :class="{ on: index === aactiveIndex }"
          v-for="(app, index) in menus"
          :key="index"
          @click="handleAppClk(app, index)"
        >
          {{ app.name }}
        </div>
      </div>
      <div class="link-main">
        <a-button type="primary" @click="onJump"> 系统中心 </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import { MENUS } from "@/core/child-projects-config"

export default {
  data() {
    return {
      visible: false,
      menus: MENUS,
      aactiveIndex: 1,
    }
  },
  mounted() {},
  computed: {},
  methods: {
    handleClk() {
      this.visible = true
    },
    onClose() {
      this.visible = false
    },
    handleAppClk(app, index) {
      this.visible = false
      if (this.aactiveIndex === index) {
        return
      }
      this.$router.push(`/child${app.link}`)
      this.aactiveIndex = index
    },
    onJump() {
      this.$router.push("/")
    },
  },
}
</script>
<style scoped lang="less">
.wrapper {
  color: #ea5529;
  font-weight: 600;
  width: 100%;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 5px;
}
.child-app-drag {
  border-radius: 8px;
}
.child-app-wrap {
  display: flex;
  justify-content: center;
}
.app-item {
  border: 1px solid #333;
  margin-right: 20px;
  padding: 30px;
  border-radius: 8px;
  cursor: pointer;
  &:hover {
    color: #ea5529;
  }
  &.on {
    color: #ea5529;
    border-color: #ea5529;
  }
}
.link-main {
  text-align: center;
  margin-top: 30px;
}
</style>
